<template>
  <a-button
    type="link"
    style="padding: 4px 6px"
    @click="onClick"
    :icon="h(PlusOutlined)"
    :disabled="hasEditing"
  >
    添加标签
  </a-button>
</template>
<script setup>
import { computed } from 'vue'
import { useVModel } from '@vueuse/core'
import { Form, message as Message } from 'ant-design-vue'
import { useDataSourceManager, useDataSource } from './provide-context.js'
import { h } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'

/**
 * 外部参数
 */
let props = defineProps({
  id: {
    type: String,
    required: true,
  },
})
/**
 * 全局
 */
let { createTagEmpty } = useDataSourceManager()
let dataSource = useDataSource()

/**
 * 操作事件
 */
async function onClick() {
  createTagEmpty(props.id)
}
// 递归检查是否有 editing 为 true 的元素
const checkEditing = items => {
  return items.some(item => {
    if (item.editing === true) {
      return true
    }
    if (item.children && item.children.length > 0) {
      return checkEditing(item.children)
    }
    return false
  })
}
/**
 * 整体有没有在编辑状态
 */
let hasEditing = computed(() => checkEditing(dataSource.value))
</script>
